<template>
    <view>
        <!-- pages/user/address/edit/index.wxml -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <view class="info">
            <view class="info-item">
                <view class="info-item-title">联系人：</view>
                <view class="info-item-input">
                    <input placeholder="请填写收货人的姓名" placeholder-class="input-color" @input="take_nameFun" :value="take_name" />
                </view>
            </view>

            <view class="info-item">
                <view class="info-item-title">手机号：</view>
                <view class="info-item-input">
                    <input placeholder="请填写收货手机号码" placeholder-class="input-color" type="number" @input="take_phoneFun" :value="take_phone" />
                </view>
            </view>

            <view class="info-item">
                <view class="info-item-title">收货地址：</view>
                <view class="info-item-img">
                    <image :src="imgUrl + '/imgs/address.png'"></image>
                </view>
               <region-picker class="info-item-picker" @change="select_address">
                    <view :class="'info-item-input1 ' + (province ? 'item-input-color' : '')">
                        {{ province ? province : '点击选择' }} {{ city ? city : '' }} {{ district ? district : '' }}
                    </view>

                    <view class="info-item-img info-item-picker-img">
                        <image :src="imgUrl + '/imgs/user/address/right.png'"></image>
                    </view>
                </region-picker>
            </view>

            <view class="info-item">
                <view class="info-item-title">具体地址：</view>
                <view class="info-item-input">
                    <input placeholder="如：XXX街道10号楼320室" style="margin-left: 25rpx" placeholder-class="input-color" @input="inputAddress" :value="detail_address" />
                </view>
            </view>

            <view class="info-item">
                <view class="info-item-title">设为默认地址：</view>
                <view class="info-item-default" @tap="setDefault">
                    <image :src="imgUrl + '/imgs/user/address/' + (is_default ? '' : 'no_') + 'default.png'"></image>
                </view>
            </view>
        </view>

        <!-- 添加 -->
        <view class="add" @tap="submitAddress">
            <view class="add-img">
                <image :src="imgUrl + '/imgs/user/address/add.png'"></image>
            </view>
            <view class="add-text">{{ type == 'add' ? '保存' : '修改' }}地址</view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/user/address/edit/index.js
const Config = require('../../../../config/index.js');

const Api = require('../../../../api/index.js');

export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                title: '新增地址' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            take_phone: '',
            take_name: '',
            province: '',
            city: '',
            district: '',
            detail_address: '',
            is_default: false,
            type: '',
            //类型
            id: 0 //地址id
        };
    },
    onLoad(e) {
        this.setData({
            type: e.type,
            id: e.id ? e.id : 0
        });

        if (this.type == 'edit') {
            this.getEditData();
        }
    },
    methods: {
        take_nameFun(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //收货人
            this.setData({
                take_name: e.detail.value
            });
        },

        take_phoneFun(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //收货人
            this.setData({
                take_phone: e.detail.value
            });
        },

        select_address(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                province: e.detail.value[0],
                city: e.detail.value[1],
                district: e.detail.value[2]
            });
        },

        inputAddress(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //详情地址
            this.setData({
                detail_address: e.detail.value
            });
        },

        setDefault(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                is_default: !this.is_default
            });
        },

        getEditData() {
            //获取编辑数据
            var json = {
                id: this.id
            };
            Api.userAddressOne(json).then((res) => {
                if (res.code == 1) {
                    this.setData({
                        id: res.data.id,
                        take_phone: res.data.take_phone,
                        take_name: res.data.take_name,
                        province: res.data.province,
                        city: res.data.city,
                        district: res.data.district,
                        detail_address: res.data.detail_address,
                        is_default: res.data.is_default
                    });
                }
            });
        },

        submitAddress(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //提交
            var json = {
                type: this.type,
                info: {
                    id: this.id,
                    take_phone: this.take_phone,
                    take_name: this.take_name,
                    province: this.province,
                    city: this.city,
                    district: this.district,
                    detail_address: this.detail_address,
                    is_default: this.is_default
                }
            };
            Api.userAddressSave(json).then((res) => {
                if (res.code == 1) {
                    wx: uni.navigateBack({
                        delta: 1
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
